<template>
    <div
        class="base-panel-container"
        :style="{ height: valueOrStr(height), width: valueOrStr(width), minHeight: '130px' }"
    >
        <div class="base-panel-common-bg" />
        <div class="base-panel-content">
            <div v-if="showHeader" class="base-panel-top-title">
                <div class="base-panel-text-box">
                    <slot name="title">
                        <span class="title">{{ title }}</span>
                    </slot>
                </div>
                <div>
                    <slot name="rightTitle" />
                </div>
            </div>
            <div
                class="base-panel-default-content"
                :style="{ height: showHeader ? 'calc(100% - 36px)' : '100%' }"
            >
                <slot name="default" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
/**
 * 定义props
 */
defineProps({
    /**
     * 面板高度 最小高度130px, 如果小于130px, 则需要自己进行手动调整border的样式和移除minHeight
     */
    height: {
        type: [Number, String],
        default: '100%',
    },
    /**
     * 面板宽度
     */
    width: {
        type: [Number, String],
        default: '100%',
    },
    /**
     * 标题
     */
    title: {
        type: String,
        default: '',
    },
    /**
     * 是否显示头部
     */
    showHeader: {
        type: Boolean,
        default: true,
    },
})

// 格式化像素
const valueOrStr = (val: string | number | undefined) => {
    if (typeof val === 'undefined') {
        return undefined
    } else if (typeof val === 'string') {
        return val
    }
    return `${val}px`
}
</script>
